<template>
  <div class="AddWebPage">
    <div class="cus-title">
      <h4>编辑网页</h4>
    </div>
    <div v-if="inited" class="cus-update">
      <el-form ref="form" :model="BindForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="网页标题:" prop="title">
          <el-col :span="24">
            <el-input
              v-model="BindForm.title"
              type="text"
              placeholder="请输入网页标题，最多30个字符"
              maxlength="30"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="网页内容:" prop="html">
          <el-col :span="24">
            <WangEditor ref="rentEditor0" v-model="BindForm.html" />
          </el-col>
        </el-form-item>
        <el-form-item label="SEO描述:" prop="seoDescription">
          <el-col :span="24">
            <el-input
              v-model="BindForm.seoDescription"
              type="text"
              placeholder="可输入网页SEO描述，最多100个字符"
              maxlength="100"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="SEO关键词:" prop="seoKeywords">
          <el-col :span="24">
            <el-input
              v-model="BindForm.seoKeywords"
              type="text"
              placeholder="可输入网页SEO关键词，最多100个字符"
              maxlength="100"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="备注说明:" prop="remark">
          <el-col :span="24">
            <el-input
              v-model="BindForm.remark"
              type="text"
              placeholder="可填入备注说明，最多30个字符"
              maxlength="30"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认编辑</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Loading } from 'element-ui'
import { webPageEdit, webPageDetail } from '@/api/webpage'
import WangEditor from '../../../components/WangEditor/index'
/** 编辑网页 */
export default {
  name: 'AddWebPage',
  components: {
    WangEditor
  },
  data() {
    return {
      inited: false,
      BindForm: {
        id: null,
        title: '',
        html: '',
        seoDescription: '',
        seoKeywords: '',
        remark: ''
      },
      rules: {
        title: [{ required: true, message: '请输入网页标题', trigger: 'change' }],
        html: [{ required: true, message: '请编辑网页内容', trigger: 'change' }]
      }
    }
  },
  created() {
    const params = this.$dd(this.$route.query.p)
    this.BindForm.id = params.id
    this.loadPageDetail()
  },
  methods: {
    loadPageDetail() {
      const vm = this

      const loadingInstance = Loading.service({ fullscreen: true })

      webPageDetail({
        id: vm.BindForm.id
      }).then(res => {
        loadingInstance.close()
        vm.BindForm.title = res.data.data.title ? res.data.data.title : ''
        vm.BindForm.html = res.data.data.html ? res.data.data.html : ''
        vm.BindForm.seoDescription = res.data.data.seoDescription ? res.data.data.seoDescription : ''
        vm.BindForm.seoKeywords = res.data.data.seoKeywords ? res.data.data.seoKeywords : ''
        vm.BindForm.remark = res.data.data.remark ? res.data.data.remark : ''
        vm.inited = true
      }).catch(res => {
        console.error(res)
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
        vm.$store.dispatch('tagsView/delView', vm.$route)
        vm.$router.go(-1)
      })
    },
    submit() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          const data = vm.$XEUtils.clone(vm.BindForm, true)
          webPageEdit(data).then(res => {
            loadingInstance.close()
            vm.$message.success('编辑网页成功')
            vm.$store.dispatch('tagsView/delView', vm.$route)
            vm.$router.go(-1)
          }).catch(res => {
            loadingInstance.close()
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .AddWebPage {
    padding: 30px;
    .cus-update {
      padding: 20px 30px;
      padding-bottom: 0px;
      margin-bottom: 30px;
      border: 1px solid #eee;

      .cus-input {
        max-width: 100%;
      }
    }
  }
</style>
